<template>
	<view class="sing-in">
		<view class="info-head-line">
			<image class="info-icon" src="../../static/my-icon/left.png" mode="" @tap="$Router.back()"></image>
		</view>
		<view class="header-banner">
			<image src="../../static/img/sing-bj.png" mode="" class="img"></image>
		</view>
		<view class="img-title">
			<image src="../../static/img/sing-size.png" mode="" class="img"></image>
			<text class="text">无限积分拿不停</text>
		</view>
		<view class="sing-in-box">
			<view class="sing-title">
				<view class="si-tit-i">
					已连续签到 <text class="si-num">3</text> 天
				</view>
				<view class="si-tit-j">连续签到7天即可享受奖励翻倍</view>
			</view>
			<view class="u-demo-block__content">
				<u-line-progress :percentage="percentage" :showText="false" inactiveColor="#ffc8c6">
				</u-line-progress>
				<view class="u-demo-block__mg u-demo">
					<text class="u-demo-block__jifen">99积分</text>
				</view>
				<view class="u-demo-block__mg u-demo_">
					<text class="u-demo-block__jifen">99积分</text>
				</view>
				<view class="u-demo-block__mg u-demo__">
					<text class="u-demo-block__jifen">99积分</text>
				</view>
			</view>

			<view class="u-demo-block__day">
				<text class="txt_">1天</text>
				<text class="txt_">2天</text>
				<text class="txt_">3天</text>
				<text class="txt_">4天</text>
				<text class="txt_">5天</text>
				<text class="txt_">6天</text>
				<text class="txt_">7天</text>
			</view>
			<view class="sing-in-btn" @tap="singTap('plus')">
				签到
			</view>
			<view class="sing-in-msg">
				已经获得 <text class="text-num">99</text> 积分
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percentage: 43.5
			};
		},
		onLoad() {

		},
		methods: {
			singTap(type) {
				if (type === 'plus') {
					this.percentage = uni.$u.range(0, 100, this.percentage + 14.5)
				} else {
					this.percentage = uni.$u.range(0, 100, this.percentage - 10)
				}
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body {
		height: 100%;
	}

	.info-head-line {
		position: fixed;
		top: 76rpx;
		left: 0;
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
		padding-left: 19rpx;
		z-index: 9999;

		.info-icon {
			width: 20rpx;
			height: 36rpx;
		}

	}

	.box {
		width: 18rpx;
		height: 18rpx;
		background: linear-gradient(to bottom right, #fff 0%, #fff 49.9%, #ffc296 50%, #fb9e8c 100%);
		transform: rotate(45deg);
	}

	.u-demo {
		position: absolute;
		left: 190rpx;
		top: -44rpx;
		background-image: linear-gradient(90deg, #ffc296 0%, #fb9e8c 100%);
	}

	.u-demo_ {
		position: absolute;
		left: 370rpx;
		top: -44rpx;
		background-image: linear-gradient(90deg, #ffcfac 0%, #fbd88c 100%);
	}

	.u-demo__ {
		position: absolute;
		right: -20rpx;
		top: -44rpx;
		background-image: linear-gradient(90deg, #ffcfad 0%, #fbd88c 100%);
	}

	.u-demo-block__mg {
		height: 32rpx;
		width: 100rpx;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-demo-block__mg:after {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		border: solid transparent;
		content: "";
		height: 0;
		width: 0;
		pointer-events: none;
		border-color: #fff;
		border-top-color: #ffc296;
		border-width: 10rpx;
	}

	.u-demo-block__jifen {
		font-size: 21rpx;
		color: #ffffff;
	}

	.u-percentage-slot {
		padding: 1px 5px;
		background-color: #ffc8c6;
		color: #fff;
		border-radius: 100px;
		font-size: 10px;
		margin-right: -5px;
	}

	.u-demo-block__content {
		position: relative;
		width: 624rpx;
	}

	.u-demo-block__day {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 624rpx;
		box-sizing: border-box;
		margin-top: 17rpx;
		padding-left: 44rpx;
		padding-right: 7rpx;
		font-weight: 700;

		.txt_ {
			font-size: 24rpx;
			font-weight: bold;
			letter-spacing: 0rpx;
			color: #bababa;
		}
	}

	.head-nav {
		position: absolute;
		color: #fff;
		height: 100%;
	}

	.sing-in {
		position: relative;
		height: 100%;
		background-image: linear-gradient(180deg,
				#e34943 11%,
				#c80524 100%);

		.header-banner {
			width: 100%;
			height: 500rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.img-title {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 90rpx 54rpx 70rpx;

			.img {
				width: 643rpx;
				height: 86rpx;
				margin-bottom: 38rpx;
			}

			.text {
				position: relative;
				font-size: 36rpx;
				color: #ffffff;
			}

			.text::before {
				position: absolute;
				top: 23rpx;
				left: -60rpx;
				content: "";
				width: 49rpx;
				height: 3rpx;
				background-color: #ffffff;
				border-radius: 2rpx;
			}

			.text::after {
				position: absolute;
				top: 23rpx;
				right: -60rpx;
				content: "";
				width: 49rpx;
				height: 3rpx;
				background-color: #ffffff;
				border-radius: 2rpx;
			}
		}

		.sing-in-box {
			position: relative;
			margin: 30rpx auto;
			padding: 38rpx 35rpx 38rpx 32rpx;
			box-sizing: border-box;
			width: 690rpx;
			// height: 320rpx;
			background-color: #ffffff;
			border-radius: 37rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.sing-title {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 75rpx;

				.si-tit-i {
					font-size: 35rpx;
					letter-spacing: 0rpx;
					color: #323232;
					font-weight: bold;
					margin-bottom: 20rpx;

					.si-num {
						color: #c60122;
					}
				}

				.si-tit-j {
					font-size: 23rpx;
					letter-spacing: 2rpx;
					color: #9c9c9c;
					font-weight: bold;
				}
			}

			.msg {
				// font-size: 23rpx;
				// color: #9c9c9c;
				margin: 20rpx 0 60rpx 0;
				font-size: 35rpx;
				color: #323232;
				font-weight: normal;
			}

			.sing-in-btn {
				margin-top: 50rpx;
				width: 203rpx;
				height: 63rpx;
				background-color: #c60122;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(245, 62, 15, 0.32);
				border-radius: 32rpx;
				color: #fff;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.sing-in-msg {
			position: absolute;
			bottom: 44rpx;
			right: 28rpx;
			font-size: 24rpx;
			letter-spacing: 2rpx;
			color: #bababa;
			font-weight: 700;

			.text-num {
				color: #c60122;
			}
		}
	}
</style>
